input {
        font: inherit;  font-size: .6rem; border-radius: 2px; border: 1px solid rgb(156, 153, 136);
        width: 2rem; max-width: 100%; padding: 0.2rem; color: rgb(66, 63, 44);
}

body { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif}


.mainbody { margin-left: 5%; padding-left: 5px;}

#sideNav {
        height: 100%;  width: 10%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(35, 95, 89);
        overflow-x: auto; padding-top: 8em; padding-left: .8em; margin-right: .8em; margin-top: 0px; color: white; }
#sideNav ul {list-style-type: none; padding:0px;}
#sideNav li { margin-bottom: .2em; cursor: pointer; padding: .2em; justify-content: center; align-items: center; }
#sideNav li:hover { background-color: rgb(116, 111, 111); }
#sideNav .activeNav { background-color: white; font-weight: bold; color: black; transition: 0.2s; }
#sideNav .navGroupLabel { background-color: rgb(214, 202, 202); color: black; }

#contactForm input {
        width:80%;
                font-size: 1em;
                margin:5px;
}
#contactFormTop input {
        width:95%;
        align-self: center;
                font-size: 1em;
                margin:4px;
}

#loginForm input {
        width:95%;
        align-self: center;
                font-size: 1em;
                margin:4px;
}

.mainbody h2 {
margin-bottom: .3em;
margin-top: 2em;
}

.mainbody h4 {
        margin-bottom: .2em;
        margin-top: 2em;
        }
        
table { border-collapse: collapse; border-radius: 4px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        width: 90%; align-self: center; }

th {    border-style: solid; border-width: 0px 0px 1px 0px;color: #333; font-size: 12px;
        font-weight: bold; overflow: hidden; padding: 2px 2px; word-break: normal; text-align: right }

tr {    padding: 1px;
        margin: 2px}

td {    background-color: #fff; border-color: #ccc; border-style: solid;
        border-width: 0px; color: #333; font-size: 14px; overflow: hidden; padding: 0px 0px; word-break: normal; text-align: right; height: 10px; }
        
h5 { margin: 12px; }

hr { margin: 5%; }

input[type=number] {
        padding: 0px;
        width: 90%;
        height: 14px;
        margin: 0px;
        border-width: 0px;
        background-color: rgba(224, 230, 229, 1);
        text-align: center;
}

.rightBord {
        border-color: black;  border-style: solid; border-width: 0px 0px 0px 0px; }

.hidden { display: none; transition: 0.5s; }

.split {
        display: grid;
        grid-template-columns: 50% 50%;
        border-width: 2px;
        border-color: black;
        gap: 10px 10px;
        /*padding: 30px;*/
        padding: 2rem;
        border-color: black;
}

.modelTop {
display: flex;
width: 60%;
}

.inpTab {
        width: 100%;
        align-content:  left;
}

.splitModel {
        float: left;
        padding: 5px;
        margin: 5px
}

.splitModelMain {
        margin: 10px; 
        flex: 2;
        width:90%;
        }

.splitModelImp {
        float: left;
        padding: 15px;
        width: 100%;
        margin: 10px;
 
 }

.splitModelSum {
        padding: 15px 30px 30px 30px;
        width: 30%;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;    
        /*border-width: 2px;
        border-color:rgb(66, 63, 44);
        border-style:solid;   */
        background-color: rgb(240, 240, 240);
}

/*** Containter for input block ***/

.splitModelBlock
{
        display:grid;
        grid-template-columns: 50% 50%;
}
.splitModelBlock.hidden
{
        display:none;
        grid-template-columns: 50% 50%;
}

.modelTop.hidden
{
        display:none;
        grid-template-columns: 50% 50%;
}


.splitModelBlockLeft { grid-column: 1; margin: 1% 5% 5% 5%;   align-content:  right;}
.splitModelBlockRight {grid-column: 2; margin: 1% 5% 5% 5%}


.split3 {float: left; padding: 5px; margin: 5px}

.split3-1 { float: left; padding: 15px; width: 30%;}

.split3-2 { float: left; padding: 15px; width: 30%; margin: 30px}

.split3-3 { padding: 15px; width: 30%; position: fixed; z-index: 1; top: 0; right: 0;}

 #modInp {

        /*grid-column-end: span 2; */
        display: flex;
        justify-content: space-between;
        list-style: none;
        align-items: center;
        padding: 4px 4px;
        margin: 5px 10px;
        position: sticky;
        width: 70%;
        top: 0;
        left: 0;
        box-sizing: border-box;
        text-align: center;
        padding-inline-start: 20px;
        border-width: 2px;
        border-color:rgb(66, 63, 44);
        border-style:solid;
        

} 

table.textTable  {
       width: 90%; align-self: center; margin-left: 20px; 
       border-width: 2px;border-color:darkgray;border-style: solid;
}

.textTable thead  {
        font-size: .9rem; font-weight: bolder; text-align: left; margin:10px;
        border-width: 2px;border-color:darkgray;border-style: solid;
}
.textTable tr  {     
        border-width: 2px;border-color:darkgray;border-style: solid;
}
.textTable td {
        font-size: .9rem; text-align: left; padding:5px 10px 5px 10px; vertical-align: text-top;
}
.textTable th {
        font-size: .9rem; text-align: left;  vertical-align: text-top; padding:5px 10px 5px 10px; 
}
.textTable ul {
        padding-inline-start: 20px; margin-block-end:0em;margin-block-start:0em;
}

table.formTable  {
        width: 60%; align-self: center; margin-left: 2px; 
        border-width: 2px;border-color:darkgray;border-style: solid;
 }
 
 .formTable thead  {
         font-size: .9rem; font-weight: bolder; text-align: left; margin:10px;
         border-width: 2px;border-color:darkgray;border-style: solid;
 }
 .formTable tr  {     
         border-width: 2px;border-color:darkgray;border-style: none;
 }
 .formTable td {
         font-size: .9rem; text-align: left; padding:1px 2px 2px 10px; vertical-align: text-top;
 }
 .formTable th {
         font-size: .9rem; text-align: left;  vertical-align: text-top; padding:5px 10px 5px 10px; 
 }
 .formTable ul {
         padding-inline-start: 20px; margin-block-end:0em;margin-block-start:0em;
 }




.dataTable th {
        font-size: .8rem;
}
.dataTable td {
        font-size: .8rem; background-color: rgb(240, 240, 240);
}
.dataTable2 th {
        font-size: .8rem;
}
.dataTable2 td {
        font-size: .8rem; 
}
.labs  {font-weight: bolder; text-align: left;}

#modInp ul {
        text-align: center;
        background-color: rgb(35, 95, 89);
        color: white;
        margin: 5px;
        padding: 5px;
        padding-inline-start: 20px;
}

#modInp li {
        text-align: center;
        background-color: rgba(35, 95, 89, .5);
        color: white;
        /* margin: 10px; */
        padding: 4px 20px;
        border-radius: 6px;
        border-color: black;
        border-width: 1px;
         cursor: pointer; 
}
#modInp .listTitle {
        text-align: center;
        background-color: white;
        color: black;
        /* margin: 10px; */
        padding: 4px 20px;
        border-radius: 6px;
        border-color: black;
        border-width: 1px;
         cursor: default; 
         font-weight: bolder;
}




#modInp .actModInp  {
        text-align: center;
        background-color: rgb(35, 95, 89);
        color: white;
    /*    margin: 10px;*/
        padding: 4px 10px;
        border-radius: 6px;
        border-color: black;
        border-width: 2px;
}

#modInp li:hover {
        background-color: rgb(116, 111, 111);

}
#modInp .listTitle:hover {
        text-align: center;
        background-color: white;
        color: black;
        /* margin: 10px; */
        padding: 4px 20px;
        border-radius: 6px;
        border-color: black;
        border-width: 1px;
         cursor: default; 

}



.split-r {
        grid-column: 2;
        position: float;
        z-index: 1;
        top: 0;
        left: 0;
}

.split-l {
        grid-column: 1;
}


.colortester {
        background-color: rgb(211, 32, 32);
}

.three-chart {
        background-color: #E7E9EB; width: 1000px; height: 700px; display: grid; grid-template-columns: 40% 60%;
        border-width: 2px; border-color: black; grid-template-rows: 40% 40% 20%; gap: 20px 20px; padding: 10px; border-color: black;gap: 40px;padding: 10px;}
.three-chart-1 {grid-row: 1;grid-column: 1;background-color: white;}
.three-chart-2 {grid-row: 2;grid-column: 1;background-color: white;}
.three-chart-3 { background-color: white; grid-row-end: span 3; grid-column: 2;}
.three-chart-4 { padding-top: 50px; padding-left: 0px;grid-row: 3;grid-column: 1;}

.four-chart {
        width: 1000px; height: 650px; display: grid; grid-template-columns: 40% 60%; 
        border-width: 20px;border-color: black;grid-template-rows: 33% 34% 33%;gap: 80px;padding: 30px;}
.four-chart-1 { grid-row: 1;grid-column: 1;}
.four-chart-2 {grid-row: 2;grid-column: 1;}
.four-chart-3 { grid-row: 3;grid-column: 1;}
.four-chart-4 { grid-row-end: span 2; grid-column: 2;}
.four-chart-5 {        padding-top: 50px; padding-left: 50px; grid-row: 3; grid-column: 2;}